<script setup lang='ts'>
import RightList from '../../components/RightList.vue';
import { XbsjEarthUi } from '../../scripts/xbsjEarthUi';
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
import { getNoToken } from '../../api/service';
import { ESImageLabel } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi

const empty = ref(false)
const developContent = ref(false)
const name = ref('')
const searchList = ref()
const saerct = (e?: any) => {
    if (e) {
        //@ts-ignore
        e.target.blur()
    }
    developContent.value = true
    empty.value = true
    getNoToken(`https://restapi.amap.com/v3/place/text?key=9f0109b9f387771cf2c28b5df88ac69d&keywords=${name.value}`).then((res: any) => {
        if (res.pois) {
            // console.log(res.pois);

            empty.value = false
            searchList.value = res.pois
        }
    }).catch(error => {
        console.log(error);
    })
}
const changeDevelopContent = () => {
    developContent.value = !developContent.value
    if (developContent.value === false) {
        if (sceneObject) {
            sceneObject.show = false
        }
    }
}
let sceneObject: ESImageLabel
const flyToNmae = (location: string) => {
    const index = location.indexOf(',');//获取第一个"_"的位置
    const a = location.substring(0, index);
    const b = location.substring(index + 1)
    sceneObject.position = [Number(a), Number(b), 0]
    sceneObject.show = true
    xbsjEarthUi.activeViewer?.flyTo({
        distance: 1000,
        heading: -90,
        pitch: -90,
        flyDuration: 1,
        hDelta: -90,
        pDelta: 1
    }, [Number(a), Number(b), 0])
}
onMounted(() => {
    sceneObject = xbsjEarthUi.createSceneObject('ESImageLabel') as ESImageLabel
    sceneObject.show = false
    onBeforeUnmount(() => {
        xbsjEarthUi.destroySceneObject(sceneObject)
    })
})
</script>

<template>
    <RightList :title="'搜索'">
        <div class="roam_search">
            <span class="roam_search_span">
                <es-icon :name="'sousuo'" :color="'rgba(230, 230, 230, 1)'" :size="12" />
            </span>
            <input type="text" v-model="name" @blur="saerct" @keydown.enter="saerct($event)">
            <span class="roam_develop_icon" :class="developContent ? '' : 'roam_icon_transform'"
                @click.stop="changeDevelopContent">
                <es-icon :name="'shouqi'" :color="'#fff'" :size="12" />
            </span>
            <ul v-if="developContent">
                <li v-if="empty">正在查询...</li>
                <li v-else v-for="item in searchList" @click="flyToNmae(item.location)">
                    <div>{{ item.name }}</div>
                    <div>位置：{{ item.location }}</div>
                </li>
            </ul>
        </div>
    </RightList>
</template>
